<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/join-family.css"/>
    <title></title>
</head>
<body>
<div id="joinFalimy">
    <header>
        <a href="javascript:;" onclick="window.history.back()" class="go-back">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
            <span>返回</span>
        </a>
        <h4>家族详情</h4>
    </header>
    <section class="application">
        <ul class="apply_put">
            <c:if test="${empty jfamily.content}">
                <script>
                    var userId=localStorage.getItem("userId");
                    window.location.href="/h5/find/joinlist?userId="+userId;
                </script>
            </c:if>
            <c:forEach items="${jfamily.content}" var="li">
                <li>
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-4 family-image"><img src="${ctx}/static/h5/images/family_icon.png" alt=""/></div>
                            <div class="col-xs-4 family-detail">
                                <p>${li.fName}</p>
                                <span>始祖：${li.fName}</span> <span>地址：${li.fDesp}</span>
                            </div>
                            <input type="text" class="fId" value="${li.id}" style="display: none;">
                            <div class="col-xs-4 if-add">
                                <c:if test="${userId==0}">
                                    <button class="btn btn-default add_family">加入</button>
                                </c:if>
                                <c:forEach items="${list}" var="join">
                                    <c:if test="${join.family.id==li.id}">
                                        <c:if test="${join.isJoin==false}">
                                            <button class="btn btn-default add_family">加入</button>
                                        </c:if>
                                        <c:if test="${join.isJoin==true}">
                                            <button class="btn btn-default add_family btn-primary">已申请</button>
                                        </c:if>
                                    </c:if>
                                </c:forEach>
                                <c:forEach items="${show}" var="show">
                                    <c:if test="${show.family.id==li.id}">
                                        <button class="btn btn-default family">已加入</button>
                                    </c:if>
                                </c:forEach>
                                <input type="text" id="applyJoin" style="display: none;">
                            </div>
                        </div>
                    </div>
                </li>
            </c:forEach>
        </ul>
        <!-- <h5 class="create_tit">创建家族</h5>
        <ul class="create">
           <li>
                <div class="container">
                    <div class="row">
                        <div class="col-xs-4 family-image"><img src="../images/add-head.png" alt=""/></div>
                        <div class="col-xs-4 family-detail">
                            <p class="create_name">汶上刘氏</p>
                            <p class="create_desc">hahahh</p>
                        </div>
                    </div>
                </div>
            </li>-->
        <%--</ul>--%>
        <div class="testMess">
            <textarea name="" rows="" cols="" id="sendTest" placeholder="说一下您跟本家族成员谁有关系哦！"></textarea>
            <ul>
                <li class="testBtn sendBtn">发送</li>
                <li class="testBtn cancelBtn">取消</li>
            </ul>
        </div>
        <div class="testMask"></div>
    </section>
    <c:if test="${userId==1}">
        <footer>
            <div id="familyAdd">
                <img src="${ctx}/static/h5/images/join_add.png" alt=""/><span>新建家族</span>
            </div>
        </footer>
        <div class="family-add">
            <%--<form role="form">--%>
                <div class="form-group">
                    <input type="text" id="fName" class="form-control" placeholder="请输入家族名称">
                    <textarea class="form-control" id="fDesp" rows="3" placeholder="请输入家族描述"></textarea>
                </div>
                <button id="addCancel" class="btn btn-default">取消</button>
                <button id="addSure" class="btn btn-primary">确定</button>
            <%--</form>--%>
        </div>
    </c:if>
</div>
<div id="mask"></div>
</body>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script src="${ctx}/static/h5/js/personal/join-family.js"></script>
</html>